<template>
  <el-card>
    <el-row>
      <el-col :span="12">
        <el-input
          v-model="searchParams.name"
          placeholder="请输入套餐名称"
          style="width: 240px"
          :prefix-icon="Search"
          clearable
          @keyup.enter="getSetmealPage"
          @clear="getSetmealPage"
        />
      </el-col>
      <el-col :span="12" style="text-align: right">
        <el-button type="primary" @click="onAddSetmeal()">
          + 新增套餐
        </el-button>
        <el-button type="success" @click="onSaleStatusBatch(1)">
          批量起售
        </el-button>
        <el-button type="info" @click="onSaleStatusBatch(0)">
          批量停售
        </el-button>
      </el-col>
    </el-row>
    <!-- 以下是表格 -->
    <el-row>
      <el-col>
        <el-table
          :data="setmealList"
          class="table-box"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          v-loading="loading"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column
            label="套餐名称"
            width="200"
            align="center"
            prop="name"
          ></el-table-column>
          <el-table-column
            label="所属分类"
            width="120"
            prop="categoryName"
          ></el-table-column>
          <el-table-column prop="type" label="套餐图片" align="center">
            <template #default="scope">
              <el-image
                style="width: 60px; height: 60px"
                :src="'/api/common/download?name=' + scope.row.image"
                fit="fill"
                :preview-src-list="[
                  '/api/common/download?name=' + scope.row.image
                ]"
                :preview-teleported="true"
              />
              <!-- 给el-image 加上 :preview-teleported="true" 解决遮罩层盖不住table的问题  -->
            </template>
          </el-table-column>
          <el-table-column prop="price" label="价格" align="center">
            <template #default="scope">
              <strong>&yen; {{ Number(scope.row.price / 100) }}</strong>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="销售状态" align="center">
            <template #default="scope">
              <el-switch
                v-model="scope.row.status"
                inline-prompt
                :active-value="1"
                :inactive-value="0"
                active-text="起售"
                inactive-text="停售"
                disabled
              />
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="修改时间" align="center">
            <template #default="scope">
              {{ scope.row.updateTime }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="240px">
            <template #default="scope">
              <el-button type="info" @click="onOpenDetail(scope.row.id)">
                查看
              </el-button>
              <el-button type="primary" @click="onEditSetmeal(scope.row)">
                修改
              </el-button>
              <el-button type="danger" @click="onDeleteSetmeal(scope.row.id)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-pagination
          style="margin-top: 15px"
          v-model:current-page="searchParams.page"
          v-model:page-size="searchParams.pageSize"
          :page-sizes="[5, 10, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
  </el-card>

  <!-- 套餐详情对话框 -->
  <setmeal-detail ref="setmealDetailRef" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  reqGetSetmealPage,
  reqDeleteSetmealBatch,
  reqUpdateSetmealStatusBatch
} from '@/api/setmeal.js'
import { ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import SetmealDetail from '@/views/setmeal/SetmealDetail.vue'

const router = useRouter()
// 套餐列表
const setmealList = ref([])

//分页
const total = ref(0)
//加载
const loading = ref(false)
//条件搜索
const searchParams = ref({
  page: 1,
  pageSize: 5, //默认是5
  name: '' //套餐名称
})

// 改变pageSize
const handleSizeChange = () => {
  getSetmealPage()
}
// 改变pageNo
const handleCurrentChange = () => {
  getSetmealPage()
}

//新增套餐
const onAddSetmeal = () => {
  // 跳转到 新增套餐
  router.push('/setmeal/addEdit')
  // dishSelectRef.value.open()
}
// 修改套餐
const onEditSetmeal = (setmeal) => {
  // console.log(dish)
  router.push({ path: `/setmeal/addEdit/${setmeal.id}` })
}

//删除单个套餐
const onDeleteSetmeal = async (id) => {
  const res = await reqDeleteSetmealBatch(id)
  console.log(res.data)
}

//获取套餐列表
const getSetmealPage = async () => {
  const res = await reqGetSetmealPage(searchParams.value)
  // console.log(res)
  setmealList.value = res.data.data.records
  total.value = res.data.data.total
}

//method
onMounted(() => {
  getSetmealPage()
})

// 处理表格多选
const setmealIdSelections = ref([])
const handleSelectionChange = (items) => {
  console.log(items)
  // items中是包含了多个setmeal数据的数组，
  // 下面将从items中取出每个setmeal的id存入setmealIdSelections中
  setmealIdSelections.value = []
  items.forEach((item) => {
    setmealIdSelections.value.push(item.id)
  })
}

// 批量起售、停售的函数
const onSaleStatusBatch = async (statusValue) => {
  if (setmealIdSelections.value.length > 0) {
    const res = await reqUpdateSetmealStatusBatch(
      statusValue,
      setmealIdSelections.value
    )
    if (res.data.code === 200) {
      ElMessage.success(res.data.msg || '修改成功')
      //重新获取列表
      getSetmealPage()
    }
  }
}

//打开套餐详情对话框
const setmealDetailRef = ref(null)
const onOpenDetail = (id) => {
  setmealDetailRef.value.open(id)
}
</script>

<style scoped>
.el-row {
  margin-bottom: 10px;
}
</style>
